@import "utils";
.TagItem {
  display: inline-flex;
  padding: 0.5rem 1rem;
  margin: 0.375rem;
  background: white;
  border: 1px solid $oc-gray-4;
  color: $oc-gray-8;
  align-items: center;
  border-radius: 1.0625rem;
  cursor: pointer;
  .name {
    font-size: 0.875rem;
    font-weight: 500;
  }
  .counts {
    margin-left: 0.5rem;
    color: $oc-gray-6;
    font-size: 0.625rem;
  }
  @include media("<large") {
    padding: 0.4rem 0.8rem;
    margin: 0.15rem;
    .name {
      font-size: 0.75rem;
    }
    .counts {
      font-size: 0.5rem;
    }
  }
  &:hover {
    .name {
      color: $oc-violet-6;
    }
    border: 1px solid $oc-violet-5;
  }
}
